<template>
  <AllOut>
    <div class="index">
      <TopNav :show_links="true"></TopNav>
      <div class="index-image">
        <el-carousel height="550px">
          <el-carousel-item v-for="item in imageDataHeader" :key="item">
            <img class="index_top_bg_img" :src="item" alt="">
          </el-carousel-item>
        </el-carousel>
        <div class="navHader">
          <Nav :nav_value="0"></Nav>
        </div>
      </div>
      <div class="content_out index_content">
        <b-container fluid>
          <!-- Content here -->
          <b-row>
            <b-col md="6" sm="12" class="index_left_pic">
              <div class="img1">
                <el-carousel height="460px">
                  <el-carousel-item v-for="item in imageDataMain" :key="item">
                    <img class="index_top_bg_img" :src="item" alt="">
                  </el-carousel-item>
                </el-carousel>
              </div>
            </b-col>
            <b-col md="6" sm="12" class="index_right_content">
              <div class="index_right_content_top">
                <span>公示公告</span>
                <!-- <nuxt-link :to="'test'" class="flex aic">
                  <span>更多</span>
                  <img src="/img/right1.png" alt="">
                </nuxt-link> -->
              </div>
              <ul class="index_right_content_bottom" v-infinite-scroll="load">
                <li class="flex jcsb aic" v-for="(item, index) in pulicRows" :key="index" v-if="pulicRows.length != 0">
                  <span>{{ item.announcementTitle }}</span>
                  <span>{{ item.createTime }}</span>
                </li>
                <el-empty description="暂无数据" v-if="pulicRows.length == 0" />
              </ul>

            </b-col>
          </b-row>
          <!-- 公司板块 -->
          <b-row>
            <div class="conpany_text">
              <img class="conpany_text_image" src="/img/text1.png" alt="">
              <p class="conpany_text1">{{ conpany_name }}</p>
              <p class="conpany_text2">{{ conpany_text }}</p>
            </div>
          </b-row>
          <!-- 广告 -->
          <b-row>
            <div class="index_advertisement">
              <img @click="linkUrl(advertisement1)" v-if="advertisement1.configurationOssUrls"
                class="index_advertisement_image" :src="advertisement1.configurationOssUrls" alt="">
              <img @click="linkUrl(advertisement2)" v-if="advertisement2.configurationOssUrls"
                class="index_advertisement_image" :src="advertisement2.configurationOssUrls" alt="">
              <img @click="linkUrl(advertisement3)" v-if="advertisement3.configurationOssUrls"
                class="index_advertisement_image" :src="advertisement3.configurationOssUrls" alt="">
              <div class="index_advertisement_grid">
                <img @click="linkUrl(advertisement4)" v-if="advertisement4.configurationOssUrls"
                  class="index_advertisement_image" :src="advertisement4.configurationOssUrls" alt="">
                <img @click="linkUrl(advertisement5)" v-if="advertisement5.configurationOssUrls"
                  class="index_advertisement_image" :src="advertisement5.configurationOssUrls" alt="">
                <img @click="linkUrl(advertisement6)" v-if="advertisement6.configurationOssUrls"
                  class="index_advertisement_image" :src="advertisement6.configurationOssUrls" alt="">
                <img @click="linkUrl(advertisement7)" v-if="advertisement7.configurationOssUrls"
                  class="index_advertisement_image" :src="advertisement7.configurationOssUrls" alt="">
              </div>
            </div>
          </b-row>
          
        </b-container>
      </div>
    </div>
  </AllOut>
</template>

<script>
// import { homeConfiguration } from "@/api/index"

import { dictFun,dictSect } from "@/utils/dictUnit"
import { publicAnnouncement, homeConfiguration } from "@/api/index"
import { getDict } from "@/api/login"
export default {
  name: 'IndexPage',
  async asyncData(params) {
    const homeData = await homeConfiguration()
    // const pulicData = await publicAnnouncement({ pageNum: params.pageNum, pageSize: params.pageSize })
    // return { homeData, pulicData }
    return { homeData }
  },
 
  data() {
    return {
     
      homeData: {},
      pulicData: {},
      imageDataHeader: [],
      imageDataMain: [],
      pulicRows: [],//
      conpany_name: "",
      conpany_text: "",
      advertisement1: {},
      advertisement2: {},
      advertisement3: {},
      advertisement4: {},
      advertisement5: {},
      advertisement6: {},
      advertisement7: {},
      ruleFrom: {
        pageNum: 1,
        pageSize: 10
      },
      query: 1
    }
  },
  created() {
    // console.log("首页配置：", this.homeData);
    // console.log("公示公告:", this.pulicData);
    this.publicAnnouncementApi(this.ruleFrom)
    this.info()
  },
  mounted() {
    console.log(this.$store);
    this.dict()
  },
  methods: {
    
    imageFun(data) {
      return data.split(",")
    },

    dict() {

      dictFun()
    
      // getDict().then(res => {
      //   console.log("全部字典数据", res);
      //   this.$store.commit('updateMyArray', res.data);
      //   console.log(this.$store.state.dictData);
      //   // let data=JSON.stringify(res.data)
      //   // this.$cookies.set('dictData', data)
      //   // setTimeout(() => {
      //   //   let datas=this.$cookies.get('dictData')
      //   // let obj=JSON.parse(datas)
      //   // console.log("我是cookies11111", obj);
      //   // }, 1000);


      //   //    console.log(that.$cookies.get("token")); 
      //   // sessionStorage.setItem("dictData", JSON.stringify(res.data))
      // })
    },
    info() {
      this.imageDataHeader = this.imageFun(this.homeData.data[4].configurationOssUrls)
      this.conpany_name = this.homeData.data[2].configurationValue
      this.conpany_text = this.homeData.data[3].configurationValue
      // this.pulicRows = this.pulicData.rows
      // this.pulicRows = [...this.pulicData.rows, ...this.pulicData.rows]
      this.imageDataMain = this.imageFun(this.homeData.data[5].configurationOssUrls)
      this.advertisement1 = this.homeData.data[6]
      this.advertisement2 = this.homeData.data[7]
      this.advertisement3 = this.homeData.data[8]
      this.advertisement4 = this.homeData.data[9]
      this.advertisement5 = this.homeData.data[10]
      this.advertisement6 = this.homeData.data[11]
      this.advertisement7 = this.homeData.data[12]
    },
    linkUrl(data) {
      console.log(data.linkUrl);
      window.open(data.linkUrl)

    },
    // 滚动
    load() {
      this.ruleFrom.pageNum++
      // console.log("滚动：：：", this.ruleFrom.pageNum);
      this.publicAnnouncementApi(this.ruleFrom)
    },
    publicAnnouncementApi(params) {
      publicAnnouncement(params).then(res => {
        // console.log(res);
        if (this.pulicRows.length == res.total) {
          return
        } else {
          this.pulicRows = [...this.pulicRows, ...res.rows]
        }

      }).catch(res => {

      })
    }
  },
  // async asyncData({ params }) {
  //   console.log(params); 
  //   const pulicData = await publicAnnouncement({
  //     pageNum: params.query,
  //     pageSize: 10
  //   });
  //   return { pulicData }
  // },
  // watchQuery: {
  //   // 监听查询参数的变化  
  //   handler(query) {
  //     // 更新查询参数后，重新获取数据  
  //     this.query = query;
  //     console.log();
  //     this.$fetch();
  //   },
  //   destroy() {
  //     // 取消监听  
  //   }
  // }



}
</script>

<style scoped lang="scss">
.index_advertisement {
  margin: auto;
  margin-top: 20px;
  width: calc(100% - 30px);

  .index_advertisement_image {
    margin-bottom: 20px;
    width: 100%;
    height: 120px;
  }

  .index_advertisement_grid {
    display: flex;
    justify-content: space-between;

    img {
      width: calc(50% - 13px);
    }

  }
}

.conpany_text {
  margin: auto;
  margin-top: 20px;
  width: calc(100% - 30px);
  padding: 23px 16px 23px 66px;
  min-height: 255px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #2F6CBC;
  position: relative;

  .conpany_text_image {
    position: absolute;
    width: 42px;
    height: 202px;
    left: 12px;
    top: 23px;
  }

  .conpany_text1 {
    font-size: 24px;
    font-family: 'Source Han Sans, Source Han Sans';
    font-weight: 700;
    color: #3D3D3D;
  }

  .conpany_text2 {
    font-size: 18px;
    font-family: 'Source Han Sans, Source Han Sans';
    font-weight: 400;
    color: #3D3D3D;
  }
}

.index {
  position: relative;
}

.index-image {
  position: relative;
  height: 550px;
  width: 100%;

  .navHader {
    position: absolute;
    width: 100%;
    padding: 0 160px;
    z-index: 999;
    bottom: 0px;
    left: 0px;
  }
}

.index_top_bg_img {
  width: 100%;
  height: 100%;
  position: relative;



}

$mobile-width: 0;
$pad-width: 576px;
$pc-width: 1024px;

@mixin mobile {
  @media (min-width: $mobile-width) {
    @content;
  }
}

@mixin pad {
  @media (min-width: $pad-width) {
    @content;
  }
}

@mixin pc {
  @media (min-width: $pc-width) {
    @content;
  }
}

.index_top_bg {
  @include mobile {

    height: 299px
  }

  @include pad {

    height: 299px
  }

  @include pc {

    height: 499px;
  }
}

.index_content {
  padding-top: 30px;
  padding-bottom: 65px;
}

.index_left_pic {
  position: relative;

  .img1 {
    width: 100%;
    height: 460px;

    img {
      width: 100%;
      height: 100%;
    }

    // @include mobile {
    //   position: static;
    //   margin-bottom:10px;
    // }
    // @include pad {
    //   position: absolute;
    //   margin-bottom:10px;
    // }

    // @include pc {
    //   position: absolute;
    // }
  }

  .video {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: #000;

    @include mobile {
      position: static;
      width: 100%;
      height: auto;
    }

    @include pad {
      position: absolute;
      width: 380px;
      height: 254px;
    }

    @include pc {
      position: absolute;
      width: 580px;
      height: 386px;
    }

    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @include mobile {
    height: auto
  }

  @include pad {
    width: 380px;
    height: 400px
  }

  @include pc {
    width: 580px;
    height: 460px
  }
}

.index_right_content {
  .index_right_content_top {
    padding: 0px 16px;
    width: 100%;
    height: 40px;
    background: #2F6CBC;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      font-size: 1.125rem;
      font-family: 'Source Han Sans CN-Bold, Source Han Sans CN';
      font-weight: 700;
      color: #FFFFFF;
    }

    img {
      width: 24px;
      height: 24px;
    }
  }

  .index_right_content_bottom {
    margin-top: 10px;
    padding: 0px 16px;
    width: 100%;
    height: 410px;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #2F6CBC;
    padding: 19px 0px 0px 0px;
    overflow-y: auto;

    li {
      padding: 0px 20px 19px 47px;
      position: relative;

      // padding-bottom: 20px;
      &::after {
        position: absolute;
        content: "";
        left: 30px;
        width: 10px;
        height: 10px;
        background: #2F6CBC;
        opacity: 1;
        border-radius: 50%;
      }

      span {
        font-size: 1.125rem;
        font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
        font-weight: 400;
        color: #3D3D3D;

        &:nth-child(2) {
          font-size: 0.875rem;
          color: #898989;
        }
      }

    }
  }

  @include mobile {
    padding-left: 20px;
  }

  @include pad {
    padding-left: 20px;
  }

  @include pc {
    padding-left: 40px;
  }

  .title_show {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 5px;
  }

  .second_title {
    font-size: 1rem;
    color: #1a1a1a;
    margin-bottom: 50px;
  }

  .contents {
    font-size: 1rem;
    color: #3e3e3e;
    line-height: 2rem;
  }

  .shape_out {
    width: 100%;
    height: auto;
    border-radius: 3px;
    background: #fff;
    box-shadow: #1a1a1a44 0px 0px 3px;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    box-sizing: border-box;

    .show_text {
      text-align: center;
      height: 100px;
    }

    .gradient-text-two {
      font-size: 1.8rem;
      font-weight: bold;
      background-image: linear-gradient(to right, #ee0313, #cf436b, #b80410);
      color: transparent;
      -webkit-background-clip: text;
    }

    .title_show {
      font-size: 1.5rem;
      color: #232323
    }

    //.gradient-text-two[data-content]::after{
    //  content:attr(data-content);
    //  display: block;
    //  position:absolute;
    //  color:yellow;
    //  left:0;
    //  top:0;
    //  z-index:2;
    //  -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
    //}
  }

  .show_button {
    margin-top: 20px;
  }
}
</style>
